<template>
  <SelectTrigger label="相机移动的方式：" :options="options" width="350px" />
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]);

onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件
    timeline: false, // 时间轴控件
    animation: false, // 动画控件
    geocoder: false, // 搜索按钮
    homeButton: false, // 主页按钮
    sceneModePicker: false, // 投影方式按钮
    baseLayerPicker: false, // 图层选择按钮
    navigationHelpButton: false, // 帮助手势按钮
    fullscreenButton: false, // 全屏按钮
  });

  options.value = [
    {
      text: "生成一个点 point",
      onselect: function () {
        viewer.entities.removeAll();
        // 点
        const point = viewer.entities.add({
          id: "point", // id
          position: Cesium.Cartesian3.fromDegrees(130, 30, 10000),
          point: {
            pixelSize: 20, // 像素
            color: Cesium.Color.BLUE, // 颜色
          },
        });
        viewer.zoomTo(point);
      },
    },
    {
      text: "生成一个广告牌 billboard",
      onselect: function () {
        viewer.entities.removeAll();
        // 新增一个广告牌
        const billBoard = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(130, 31, 10000),
          billboard: {
            image: "/src/assets/image/position.png", // 资源
            scale: 0.2, // 广告牌大小
            color: Cesium.Color.YELLOW,
          },
        });
        viewer.zoomTo(billBoard);
      },
    },
    {
      text: "生成一个文本区域 label",
      onselect: function () {
        viewer.entities.removeAll();
        const label = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(140, 30, 20000),
          label: {
            text: "label1",
            font: "30px",
            fillColor: Cesium.Color.BLUE,
            showBackground: true,
            backgroundColor: Cesium.Color.RED,
          },
        });
        viewer.zoomTo(label);
      },
    },
    {
      text: "生成一条折线 polyline",
      onselect: function () {
        viewer.entities.removeAll();
        const polyline = viewer.entities.add({
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([
              120, 40, 125, 40, 150, 50,
            ]), // 经纬度数组（120，40）（125，40）（150，50）
            width: 10,
            material: Cesium.Color.YELLOW,
          },
        });
        viewer.zoomTo(polyline);
      },
    },
    {
      text: "生成一个多边形 polygon",
      onselect: function () {
        viewer.entities.removeAll();
        const polygon = viewer.entities.add({
          polygon: {
            hierarchy: {
              positions: Cesium.Cartesian3.fromDegreesArray([
                170, 40, 175, 40, 170, 50,
              ]), // 经纬度数组（120，40）（125，40）（150，50）
            },
            // material:Cesium.Color.GREEN, // 颜色
            material: new Cesium.Color(0, 0, 0, 0), // 颜色
            height: 100000, // 高度
            extrudedHeight: 200000, // 加了这个物体就变成了立体图形，且该高度为顶面高度
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            // fill:true,
          },
        });
        viewer.zoomTo(polygon);
      },
    },
    {
      text: "生成一个长方形 box",
      onselect: function () {
        viewer.entities.removeAll();
        const box = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(100, 70, 3000), // 位置
          box: {
            dimensions: new Cesium.Cartesian3(2000, 1000, 3000), // 长宽高
            material: Cesium.Color.SKYBLUE,
          },
        });
        viewer.zoomTo(box);
      },
    },
    {
      text: "生成一个椭圆 ellipse",
      onselect: function () {
        viewer.entities.removeAll();
        const ellipse = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(118, 30),
          ellipse: {
            semiMajorAxis: 500, // 半长轴
            semiMinorAxis: 300, // 半短轴
            material: Cesium.Color.YELLOW,
          },
        });
        viewer.zoomTo(ellipse);
      },
    },
    {
      text: "生成一个矩形 rectangle",
      onselect: function () {
        viewer.entities.removeAll();
        const rectangle = viewer.entities.add({
          rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(110, 40, 113, 45), // 左下角、右上角的坐标
            extrudedHeight: 30000,
            material: "/src/assets/image/pic1.webp",
          },
        });
        viewer.zoomTo(rectangle);
      },
    },
    {
      text: "生成一个混合体 entities",
      onselect: function () {
        viewer.entities.removeAll();
        const entities = viewer.entities.add({
          position: new Cesium.Cartesian3.fromDegrees(100, 108, 1000),
          billboard: {
            image: "/src/assets/image/position.png", // 资源
            scale: 0.2, // 广告牌大小
            color: Cesium.Color.YELLOW,
          },
          label: {
            text: "定位点1",
            font: "30px",
            pixelOffset: new Cesium.Cartesian2(0, -40),
            fillColor: Cesium.Color.BLUE,
            showBackground: false,
            backgroundColor: Cesium.Color.RED,
          },
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
              100, 108, 0, 100, 108, 1000,
            ]), // 经纬度数组（120，40）（125，40）（150，50）
            width: 1,
            material: Cesium.Color.SKYBLUE,
          },
        });
        viewer.zoomTo(entities);
      },
    },
  ];
  // 设置相机
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
